<template>
  <view>
    <div class="container">
      <div style="height: 10px"></div>
      <view class="all">
        <!-- 内容切换 -->
        <view class="content">
          <div class="card">
            <div style="height: 10px"></div>
            <div class="card-top">
              <div style=" text-align: center">{{ obj.requirementNo }}</div>
              <div style=" text-align: center">{{ obj.beginTime }}</div>
              <!-- <div :class="item.workOrderType==1?'right':'right1'" style="width: 20%; text-align: center;border-radius: 4px;">
                {{ item.workOrderType == 1 ? "手工单" : "自派单" }}
              </div> -->
            </div>
            <div style="height: 10px"></div>
            <u-line color="#83AF92"></u-line>
            <div style="height: 10px"></div>
            <div style="margin-left: 5%;font-size: 14px;">
              <div>实验提交时间：{{ obj.createTime }}</div>
              <div style="height: 10px"></div>
              <div>实验时间：{{ obj.beginTime }}</div>
              <div style="height: 10px"></div>
              <div>项目名称：{{ obj.itemName }}</div>
              <div style="height: 10px"></div>
              <div>原料属性：{{ obj.rawMaterialProperty }}</div>
              <div style="height: 10px"></div>
              <div>样品来源：{{ obj.sampleSource }}</div>
              <div style="height: 10px"></div>
              <div>发起理由:{{ obj.reason }}</div>
              <div style="height: 10px"></div>
              <div>实验人员:{{ obj.experimenter }}</div>
              <div style="height: 10px"></div>
              <div>实验助手:{{ obj.experimentAssistant }}</div>
              <div style="height: 10px"></div>
              <div>实验对象：{{ obj.experimentSubject }}</div>
              <div style="height: 10px"></div>
              <div>委托人：{{ obj.createBy }}</div>
              <div style="height: 10px"></div>
              <div>实验类别：{{ obj.experimentCategory }}</div>
              <div style="height: 10px"></div>
              <div>实验阶段：{{ obj.experimentStage }}</div>
              <div style="height: 10px"></div>
            </div>
            <u-line color="#83AF92"></u-line>
            <div style="height: 10px"></div>
            <div style="margin-left: 5%;font-size: 14px;">
              <div>检测项目要求：</div>
              <div style="height: 10px"></div>
              <div>{{ obj.detectionRequirement }}</div>
              <div style="height: 10px"></div>
            </div>
            <u-line color="#83AF92"></u-line>
            <div style="height: 10px"></div>
            <div style="margin-left: 5%;font-size: 14px;">
              <div>检测数据结果：</div>
              <div style="height: 10px"></div>
              <div v-for="item in dataList">
                <div>{{ item.detectionIndicator }}：{{ item.detectionResult?item.detectionResult:'无' }}{{ item.detectionResult?item.detectionIndicatorUnit:'' }}</div>
              </div>
              <div style="height: 10px"></div>
              <div>反馈信息：</div>
              <div style="height: 10px"></div>
              <div>{{ obj.feedback?obj.feedback:'暂无反馈信息' }}</div>
              <div style="height:10px"></div>
              <div>是否重做：{{ obj.redoFlag == 0 ? '否' : obj.redoFlag == 1 ? '是' : '无' }}</div>
              <div style="height: 10px;"></div>
            </div>
          </div>
          <div style="height: 10px;"></div>
          <div class="fankui" v-if="obj.experimentState == 2 && obj.feedbackState === 0&&flag==all" @click="shows = true">反馈</div>
          <div class="fankui" v-if="flag=='my'&&obj.experimentState===0" @click="startTask">开始任务</div>
          <div class="fankui" v-if="flag=='my'&&obj.experimentState==1" @click="fankuiResult">实验结果反馈</div>
          <div style="height: 10px;"></div>
        </view>
      </view>
    </div>
    <!-- 反馈弹窗 -->
    <u-overlay :show="shows" @click="shows = false">
      <view class="warp">
        <view class="rect" @tap.stop>
          <div style="text-align: center;font-size: 18px;font-weight: bold;">反馈内容</div>
          <div style="height: 30px;"></div>
          <div style="width: 95%;margin-left: 2.5%;">
            <div>
              <div>反馈内容</div>
              <div>
                <textarea v-model="feedback" placeholder="请输入反馈内容" name="" id=""></textarea>
              </div>
            </div>
            <div style="display: flex;align-items: center;">
              <div>重做任务</div>
              <div style="width: 1%;"></div>
              <div>
                <checkbox-group @change="changeCheckbox">
                  <label>
                    <checkbox value="cb" :checked="false" />重做
                  </label>
                </checkbox-group>
              </div>
            </div>
          </div>

          <div style="height: 30px;"></div>
          <div class="fankui" @click="submit">提交反馈</div>
        </view>
      </view>
    </u-overlay>
    <!-- 开始任务弹窗 -->
    <u-overlay :show="taskModel" @click="taskModel = false">
      <view class="warps">
        <view class="rects" @tap.stop>
          <div style="text-align: center;font-size: 18px;font-weight: bold;">开始任务时间</div>
          <div style="height: 30px;"></div>
          <div>
            <div class="times" @click="nowDate">当前时间</div>
            <div style="height: 20px;"></div>
            <div class="times" @click="setDate">手动设置</div>
            <div style="height: 20px;"></div>
            <div style="display: flex;justify-content: center;">
        <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
						<view class="uni-input">{{date}}</view>
					</picker>
        </div>
        <div style="height: 20px;"></div>
          <div style="display: flex;justify-content: center;">
            <picker mode="time" :value="time" start="09:01" end="21:01" @change="bindTimeChange">
						<view class="uni-input">{{time}}</view>
					</picker>
          </div>
          <!-- <div style="height: 20px;"></div> -->
          <!-- <div class="times" style="height: 30px;" @click="yesDateTime">确认</div> -->
          </div>
        </view>
      </view>
    </u-overlay>
  </view>
</template>
<script>
import { taskFeedback,startTaskFlag,taskDetailData } from '../api/api.js';
export default {
  data() {
    return {
      obj: {},
      shows: false,
      requirementId: 0,
      feedback: '',
      flag:'',
      taskModel:false,
      actualBeginTime:null,
      date:'选择日期',
      time:'选择时间',
      dataList:[]
    };
  },
  methods: {
    fankuiResult(){
      uni.setStorageSync('dataList', this.dataList)
      uni.navigateTo({
        url:'/pagesExpert/index/teskFeedback'
      })
    },
    bindDateChange: function(e) {
            this.date = e.detail.value
        },
        bindTimeChange: function(e) {
            this.time = e.detail.value
        },
    //开始任务
    nowDate(){
      startTaskFlag({id:this.obj.id,actualBeginTime:null}).then(res=>{
        if (res.data.code == 200) {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
            });
            setTimeout(() => {
              uni.navigateBack({
                delta: 1
              },1000);
            })
          } else {
            uni.showToast({
              title: res.data.msg,
              icon: 'none',
              duration: 2000,
            });
          }
      })
    },
    setDate(){
      if(this.date=='选择日期'||this.time=='选择时间'){
        uni.showToast({
              title: '请选择日期',
              icon: 'none',
            });
      }else{
        startTaskFlag({
        id:this.obj.id,
        actualBeginTime:this.date+' '+this.time+':00'
      }).then(res=>{
        if (res.data.code == 200) {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
            });
            setTimeout(() => {
              uni.navigateBack({
                delta: 1
              },1000);
            })
          } else {
            uni.showToast({
              title: res.data.msg,
              icon: 'none',
              duration: 2000,
            });
          }
      })
      }
      
    },
    startTask(){
      this.taskModel = true;
    },
    changeCheckbox(e) {
      console.log(e.detail.value);
      if (e.detail.value === 0) {
        this.requirementId = 0;
      } else {
        this.requirementId = 1;
      }
    },
    clear() {
      this.feedback = '';
      this.shows = false;
      this.requirementId = 0;
    },
    submit() {
      if (this.feedback == '') {
        uni.showToast({
          title: '请输入反馈内容',
          duration: 2000,
          icon: 'none'
        });
      } else {
        taskFeedback({
          id: this.obj.id,
          feedback: this.feedback,
          requirementId: this.requirementId
        }).then(res => {
          console.log(res);
          if (res.data.code == 200) {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
            });
            setTimeout(() => {
              this.clear();
              uni.navigateBack({
                delta: 1
              });
            })
          } else {
            uni.showToast({
              title: res.data.msg,
              icon: 'none',
              duration: 2000,
            });
          }
        })
      }
    }
  },
  onLoad(options) { 
    // console.log(options);
    this.flag = options.flag;
    console.log(this.flag);
  },
  onShow() {
    this.obj = uni.getStorageSync('expertTaskDetail');
    taskDetailData(this.obj.id).then(res=>{
      console.log(res.data,'res.data');
      this.dataList = res.data.data;
    })
    this.role = uni.getStorageSync('userInfo').remark;
    var pages = getCurrentPages();
    let currentPageRoute = pages[pages.length - 1].route;
    // 根据当前页面路径设置currentPage
    this.currentPage = currentPageRoute;
    console.log(this.currentPage);
  },
};
</script>
<style lang="scss">
.container {
  height: 100vh;
  width: 100vw;
  background: #e3ede2;
  color: #1a512c;
  overflow-y: scroll;
}

.head-nav {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.activite {
  border-bottom: 2px solid #1a512c;
}

.card {
  width: 95%;
  margin-left: 2.5%;
  margin-top: 10px;
  border-radius: 10px;
  background: #b9e2c7;

  .card-top {
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 90%;
    margin-left: 5%;
  }
}

.items {
  display: flex;
  align-items: center;
  width: 90%;
  margin-left: 5%;
  justify-content: space-between;
  font-size: 14px;
}

.table {
  width: 90%;
  margin-left: 5%;
}

.status {
  color: #fff;
  background: #1b9c46;
  width: 90%;
  margin-left: 5%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  border-radius: 3px;
}

.status1 {
  color: #1a512c;
  background: #FDBD18;
  width: 90%;
  margin-left: 5%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  border-radius: 3px;
}

.right {
  background: #FDBD18;
  color: #fff;

}

.right1 {
  background: #50AB18;
  color: #fff;
}

.fankui {
  display: flex;
  align-items: center;
  color: #fff;
  border-radius: 5px;
  background: #50AB18;
  width: 90%;
  margin-left: 5%;
  height: 35px;
  justify-content: center;
}

.warp {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.rect {
  width: 90vw;
  // height: 0vh;
  background-color: #fff;
  border-radius: 5px;
  padding: 10px 0 10px 0;
}
.warps {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.rects {
  width: 90vw;
  height: 40vh;
  background-color: #fff;
  border-radius: 5px;
  padding: 10px 0 10px 0;
}
.times{
  background-color: #18512c;
  color: #fff;
  width: 90%;
  margin-left: 5%;
  height: 50px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>